/**
 * create by young (young2f@outlook.com) on 2020/9/12
 */


'use strict';
import React from 'react';
import {connect} from 'dva/index';
import {DatePicker, Drawer, Form, Input, Select, Table} from 'antd';

import styles from '../index.less';
import FormBase from '../../components/Base/FormBase';
import moment from 'moment';
import 'moment/locale/zh-cn';
import MaterialElement from "../finance/modal/MaterialElement";
import ViewTitle from "../../components/ViewTitle";
import {FormField, SearchForm} from "antd-extra";
import ModalProdDetail from "./modal/ModalProdDetail";

const {RangePicker} = DatePicker;
moment.locale('zh-cn');

const _ = require('lodash');

@Form.create()
@connect(({
            sales
          }) => ({...sales}))
export default class Prod extends FormBase {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    const payload = this.props.form.getFieldsValue();
    _.map(payload, (value, key) => {
      if (value === '') {
        payload[key] = undefined;
      }
    });
    console.log('findSalesProdMany111', payload);
    this.props.dispatch({
      type: 'sales/findSalesProdMany',
      payload
    });
  }

  cols() {
    return [
      {
        title: '商品', dataIndex: 'prodName', key: 'prodName', render: (text, record) => {
          const {prodName, prodCode} = record;
          return <MaterialElement code={prodCode} name={prodName}></MaterialElement>;
        }
      },
      {title: '订单编码', dataIndex: 'salesOrderCode', key: 'salesOrderCode'},
      {title: '销售公司', dataIndex: 'division', key: 'division'},
      {title: '客户', dataIndex: 'customer', key: 'customer'},

      {title: '数量', dataIndex: 'count', key: 'count'},
      {title: '单价', dataIndex: 'price', key: 'price'},
      {title: '标签', dataIndex: 'label', key: 'label'},
      {title: '开票数量', dataIndex: 'invoicingCount', key: 'invoicingCount'},
      {
        title: '物料批次数量', dataIndex: 'label', key: 'label', render: (text, record) => {
          let count = 0;
          const {materialLots} = record;
          _.map(materialLots, (value, key) => {
            const {materialCount} = value;
            count += materialCount;
          });
          return count?<div>{count}</div>:<div style={{color:'#cf1322'}}>{count}</div>;
        }
      },
      {
        title: '包装批次数量', dataIndex: 'label', key: 'label', render: (text, record) => {
          let count = 0;
          const {pkgLots} = record;
          _.map(pkgLots, (value, key) => {
            const {materialCount} = value;
            count += materialCount;
          });
          return count?<div>{count}</div>:<div style={{color:'#cf1322'}}>{count}</div>;
        }
      },
      {
        title: '创建时间', dataIndex: 'createdTs', key: 'createdTs', render: value => {
          return <div>{moment(value).format('YYYY-MM-DD')}</div>;
        }
      },
      {
        title: '操作', dataIndex: 'opt', key: 'opt', fixed: 'right', width: 100, render: (text, record) => {
          return <a style={{marginRight: '6px'}}
                    onClick={() => this.setState({showDetail: true, record})}>详情</a>;
        }
      }
    ];
  }

  render() {
    const {salesProds = [], form} = this.props;

    const {record = {}, showDetail} = this.state;
    return <Form className={styles.content}>
      <ViewTitle
        title={`销售商品列表`}
        level={1}
      ></ViewTitle>
      <SearchForm
        style={{marginLeft: '6px', marginRight: '6px'}}
        onSearch={() => {
          this.state.current = 1;
          this.componentDidMount();
        }}
        onReset={this.handleReset}
        cols={4}
        min={8}
        expandText="展开"
        form={form}
      >
        {[
          <FormField
            label={"品名"}
            name={"prodName"}
            key={"prodName"}
          >
            <Input allowClear style={{width: '100%'}}></Input>
          </FormField>,
          <FormField
            label={"编码"}
            name={"prodCode"}
            key={"prodCode"}
          >
            <Input allowClear style={{width: '100%'}}></Input>
          </FormField>,
          <FormField
            label={"订单编码"}
            name={"salesOrderCode"}
            key={"salesOrderCode"}
          >
            <Input allowClear style={{width: '100%'}}></Input>
          </FormField>,
          <FormField
            label={"客户"}
            name={"customer"}
            key={"customer"}
          >
            <Input allowClear style={{width: '100%'}}></Input>
          </FormField>,
          <FormField
            label={"物料库存占用"}
            name={"isMaterialLotUsed"}
            key={"isMaterialLotUsed"}
          >
            <Select allowClear style={{width: '100%'}}>
              {[<Select.Option value={'已占用'}>{'已占用'}</Select.Option>,
                <Select.Option value={'未占用'}>{'未占用'}</Select.Option>]}
            </Select>
          </FormField>,
          <FormField
            label={"包材库存占用"}
            name={"isPkgLotUsed"}
            key={"isPkgLotUsed"}
          >
            <Select allowClear style={{width: '100%'}}>
              {[<Select.Option value={'已占用'}>{'已占用'}</Select.Option>,
                <Select.Option value={'未占用'}>{'未占用'}</Select.Option>]
              }
            </Select>
          </FormField>,
          <FormField
            label={"是否开票"}
            name={"isInvoice"}
            key={"isInvoice"}
          >
            <Select allowClear style={{width: '100%'}}>
              {[<Select.Option value={'已开票'}>{'已开票'}</Select.Option>,
                <Select.Option value={'未开票'}>{'未开票'}</Select.Option>]
              }
            </Select>
          </FormField>,
          <FormField
            label="创建时间"
            name="createdTs"
            key={3}
            initialValue={[this.getSearchStart1Months(), this.getDefaultSearchEndDate()]}
          >
            <RangePicker allowClear={true}
              // style={{ width: '150%' }}
            />
          </FormField>,

        ]}
      </SearchForm>
      <Table
        className={styles.antTable}
        // className="components-table-demo-nested"
        bordered={true}
        columns={this.cols()}
        dataSource={salesProds}
        scroll={{x: true}}
        rowKey={record => record.spLotId}

        pagination={{
          current: this.state.current,
          total: this.state.total,
          showSizeChanger: true,
          onChange: page => {
            this.state.current = page;
            this.componentDidMount();
          },
          onShowSizeChange: (current, pageSize) => {
            this.state.current = 1;
            this.state.pageSize = pageSize;
            this.componentDidMount();
          }
        }}>

      </Table>
      {showDetail && <Drawer
        visible={showDetail}
        title={`商品详情`}
        placement="left"
        width={'80%'}
        style={{padding: 0}}
        // maskClosable={false}
        onClose={() => {
          this.setState({showDetail: false});
          this.componentDidMount();
        }}
      >
        <ModalProdDetail
          values={record}
        > </ModalProdDetail>
      </Drawer>}
    </Form>;
  }
}
